<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<link rel="stylesheet" href="css/detail.css">
		<link rel="stylesheet" href="css/geren.css">
		<link rel="shortcut icon" type="img/x-icon" href="img/logo.jpg"/ >
		<script src="js/jquery-3.3.1.min.js"></script>	
	</head>
	<body>
		<div class="nav">
			<div class="nav-content">
				<img src="img/putao.jpg"/>
				<div class="list">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="list.html">全部店家</a></li>
						<li><a href="list2.html">店家详情</a></li>
						<li><a href="detail.html">菜品详情</a></li>
						<li><a href="contact.html">联系我们</a></li>
						<li><a href="" class="on">个人中心</a></li>
					</ul>
				</div>
				
			</div>	
		</div>
		<hr>
		<div class="zuida">
			<div class="tou">
				
			</div>
			<div class="zuo">
				<ul id="ul1">
					<li ><a href="#" style="font-size: 20px;color: deepskyblue;" id="geren">个人中心</a></li>
					<li>
						<h3 style="margin-bottom: 10px;">我的订单</h3>
						<ul>
							<li>
								<a href="#" id="dingdan">近三个月订单</a>
							</li>
						</ul>
					</li>
					<li>
						<h3 style="margin-bottom: 10px;margin-top: 20px;">我的资产</h3>
						<ul>
							<li style="margin-bottom: 5px;">
								<a href="#">我的红包</a>
							</li>
							<li style="margin-bottom: 5px;">
								<a href="#">账号余额</a>
							</li>
							<li style="margin-bottom: 5px;">
								<a href="#">我的金币</a>
							</li>
						</ul></li>
					<li>
						<h3 style="margin-bottom: 10px;">我的资料</h3>
						<ul>
							<li>
								<a href="#" id="ziliao">个人信息</a>
							</li>
							<li>
								<a href="#" id="chakan">个人信息查看</a>
							</li>
						
						</ul>
					</li>
					<li>
						<h3 style="margin-bottom: 10px;">我的收藏</h3>
						
					</li>
					
				</ul>
			</div>
			<div class="you" id="you">
				<div class="you1">
					
						<div class="ys1">
							<div class="touxiang"></div>
							<div class="yonghu">
								
								<h4>欢迎你，鸡你太美！</h4>
								
							</div>
						</div>
						<div class="ys2">
							<p class="hongbao">我的红包</p>
							<p class="hongbao2"><span class="hongbao3">0</span>个</p>
						</div>
						<div class="ys3">
							<p class="jinbi">我的金币</p>
							<p class="jinbi2"><span class="jinbi3">0</span>个</p>
						</div>
						<div class="ys4">
							<p class="yue">账户余额</p>
							<p class="yue2"><span class="yue3">0.00</span>元</p>
						</div>
					
				</div>
				<div class="you2">
					<div class="yz1">最近订单<a href="#" id="dingdan11">查看全部订单</a></div>
					<div class="yz2"></div>
				</div>
				<div class="you3"></div>
			</div>
			
			
			<div class="dingdan1" id="dingdan1">
				<h3 class="dingdan3">近三个月的订单</h3>
			<div class="dingdan2"></div>
			</div>
			
			
			
			<div class="ziliao1" id="ziliao1">
				<h3 class="ziliao3">个人资料</h3>
				<div class="ziliao2">
					<form action="" method="post">
						<table class="ziliao4">
							<tr>
								<td>头像：</td>
								<td><input type="file"/></td>
							</tr>
							<tr>
								<td>用户名：</td>
								<td><input type="text" /></td>
							</tr>
							<tr>
								<td>昵称：</td>
								<td><input type="text"></td>
							</tr>
							<tr>
								<td>联系电话：</td>
								<td><input type="text"></td>
							</tr>
							<tr>
								<td>地址：</td>
								<td><input type="text"></td>
							</tr>
							<tr>
								<td colspan="2"><input type="submit" value="提交"></td>
							</tr>
						</table>
					</form>
					
				</div>
			</div>
			
			
			<div class="ziliao1" id="chakan1">
				<h3 class="ziliao3">个人资料</h3>
				<div class="ziliao2">
					<form action="" method="post">
						<table class="ziliao4">
							<tr>
								<td>头像：</td>
								<td></td>
							</tr>
							<tr>
								<td>用户名：</td>
								<td>鸡你太美</td>
							</tr>
							<tr>
								<td>昵称：</td>
								<td>鸡你太美</td>
							</tr>
							<tr>
								<td>联系电话：</td>
								<td>11111111</td>
							</tr>
							<tr>
								<td>地址：</td>
								<td>河南省郑州市</td>
							</tr>
							<tr>
								<td colspan="2"><input type="submit" value="提交"></td>
							</tr>
						</table>
					</form>
					
				</div>
			</div>
			
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
			<div class="foot">
		<div class="footer">
			<div class="footer-bg">
				<div class="footer-bglist">
				<ul>
					<li>
						<img src="img/bottom1.png" alt="" />
						<div class="foot-text">
							<font>食品安全</font><br />
							<span>精选产品，严格质检</span>
						</div>
					</li>
					<li>
						<img src="img/bottom3.png" alt="" />
						<div class="foot-text">
							<font>全城冷链</font><br />
							<span>可靠物流 安全可控</span>
						</div>
					</li>
					<li>
						<img src="img/flower.png" alt="" />
						<div class="foot-text">
							<font>绿色天然</font><br />
							<span>绿色生态 蔬果精选</span>
						</div>
					</li>
					<li>
						<img src="img/bottom2.png" alt="" />
						<div class="foot-text">
							<font>产地直采</font><br />
							<span>限定产源 质量保证</span>
						</div>
					</li>
				</ul>
				</div>
				<div class="footer-border">
				</div>
			<div class="footer-list">
				<div class="footer-list1">
				<div>服务保障</div>
				<ul>
					<li>正品保障</li>
					<li>7天无理由退换货</li>
					<li>退货返运费</li>
					<li>7X15小时客户服务</li>
				</ul>
			</div>
			<div class="footer-list1">
				<div>支付方式</div>
				<ul>
					<li>公司转账</li>
					<li>货到付款</li>
					<li>在线支付</li>
					<li>分期付款</li>
				</ul>
			</div>
			<div class="footer-list1">
				<div>商家服务</div>
				<ul>
					<li>配送中心</li>
					<li>广告服务</li>
					<li>服务市场</li>
				</ul>
			</div>
			<div class="footer-list1">
				<div>服务保障</div>
				<ul>
					<li>免运费</li>
					<li>海外配送</li>
					<li>EMS</li>
					<li>211限时达</li>
				</ul>
			</div>
			<div class="copyright">
				Copyright&copy;1996-2018Fresh.All Rights Reserved.
			</div>
			</div>
			</div>
		</div>
	</div>
		
		
		
		
		<script>
			$(function(){
				$("#dingdan").click(function(){
					$("#you").css("display","none");
					$("#ziliao1").css("display","none");
					$("#chakan1").css("display","none");
					$("#dingdan1").css("display","block");
					/*$("#dingdan").css("color","deepskyblue");
					$("#geren").css("color","white");
					$("#ziliao").css("color","white");
					$("#chakan").css("color","white");*/
				})
				$("#dingdan11").click(function(){
					$("#you").css("display","none");
					$("#ziliao1").css("display","none");
					$("#chakan1").css("display","none");
					$("#dingdan1").css("display","block");
					/*$("#dingdan").css("color","deepskyblue");
					$("#geren").css("color","white");
					$("#ziliao").css("color","white");
					$("#chakan").css("color","white");*/
				})
				$("#geren").click(function(){
					$("#dingdan1").css("display","none");
					$("#ziliao1").css("display","none");
					$("#chakan1").css("display","none");
					$("#you").css("display","block");
					/*$("#dingdan").css("color","white");
					$("#geren").css("color","deepskyblue");
					$("#ziliao").css("color","white");
					$("#chakan").css("color","white");*/
				})
				$("#ziliao").click(function(){
					$("#dingdan1").css("display","none");
					$("#you").css("display","none");
					$("#chakan1").css("display","none");
					$("#ziliao1").css("display","block");
					
					/*$("#dingdan").css("color","white");
					$("#geren").css("color","white");
					$("#ziliao").css("color","deepskyblue");
					$("#chakan").css("color","white");*/
				})
				$("#chakan").click(function(){
					$("#dingdan1").css("display","none");
					$("#you").css("display","none");
					$("#ziliao1").css("display","none");
					$("#chakan1").css("display","block");
					/*$("#dingdan").css("color","white");
					$("#geren").css("color","white");
					$("#ziliao").css("color","white");
					$("#chakan").css("color","deepskyblue");*/
				})
			})
		</script>
	</body>
</html>